    <template>
  <div>
    <base-list ref="icCard"
               :condition="condition"
               :datas.sync="icCard"
               :pageSearch="pageSearch">
      <el-form :inline="true"
               :model="condition"
               class="search-form"
               slot="search"
               label-width="80px">
        <el-row>
          <el-col :span="7" class="search-width4">
            <el-form-item label="卡 编 号">
              <auto-search-ic-card @select="v=>condition['search_LIKE_selfNo']=v"></auto-search-ic-card>
            </el-form-item>
          </el-col>
          <el-col :span="7" class="search-width4">
            <el-form-item label="卡　　号">
              <auto-search-card-no @select="v=>condition['search_LIKE_cardNo']=v"></auto-search-card-no>
              <!-- <auto-search-dic @selectName="v=>condition['search_LIKE_cardNo']=v"
                               :name="condition['search_LIKE_cardNo']"
                               code="JOB_CLLX"></auto-search-dic> -->
            </el-form-item>
          </el-col>
          <el-col :span="7" class="search-width4">
            <el-form-item label="卡 类 型">
              <el-select v-model="condition['search_EQ_cardType']"
                         placeholder="请选择"
                         clearable>
                <el-option v-for="[key, val] in _dictCardType"
                           :key="key"
                           :label="val"
                           :value="key"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5" class="search-width4">
            <el-form-item label="状　　态">
              <el-select v-model="condition['search_EQ_status']"
                         placeholder="请选择"
                         clearable>
                <el-option v-for="[key, val] in _dictUseStatus"
                           :key="key"
                           :label="val"
                           :value="key"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <el-button type="primary"
                       icon="el-icon-search"
                       @click="loadData"
                       class="ml-80">查 询</el-button>
          </el-col>
        </el-row>
      </el-form>
      <el-row slot="status">
        <el-col :span="24">
          <el-button type="primary" formVisible="true"
                      @click="handleDialogUseForm(currentRow)">
            领用
          </el-button>
          <el-button type="primary" plain formVisible="true"
                      @click="recover(currentRow)">
            回收卡
          </el-button>
        </el-col>
      </el-row>
      <el-table slot="list"
                :data="icCard"
                border
                stripe
                highlight-current-row
                @current-change="handleCurrentChange"
                max-height="500">
        <el-table-column type="index"
                         fixed="left"
                         label="序号"
                         width="55">
          <template slot-scope="scope">
            {{ scope.$index+1 }}
          </template>
        </el-table-column>
        <el-table-column prop="selfNo"
                         label="卡编号"
                         min-width="130"></el-table-column>
        <el-table-column prop="cardNo"
                         label="卡号"
                         min-width="130"></el-table-column>
        <el-table-column prop="cardTypeDesc"
                         label="卡类型"
                         min-width="120"></el-table-column>
        <el-table-column prop="carNo"
                         label="车号"
                         min-width="120"></el-table-column>
        <el-table-column prop="cargoOwnerName"
                         label="货主名称"
                         min-width="120"></el-table-column>
        <el-table-column prop="personName"
                         label="员工姓名"
                         min-width="120"></el-table-column>
        <el-table-column prop="orgName"
                         label="所属单位"
                         min-width="200"></el-table-column>
        <el-table-column prop="createBy"
                         label="IC卡登记人"
                         min-width="200"></el-table-column>
        <el-table-column prop="createDateTime"
                         label="登记时间"
                         min-width="200"></el-table-column>
        <el-table-column prop="useedTime"
                         label="领用时间"
                         min-width="200"></el-table-column>
        <el-table-column prop="statussDesc"
                         label="状态"
                         min-width="120"></el-table-column>
        <el-table-column fixed="right"
                         align="center"
                         label="操作"
                         width="140">
          <template slot-scope="scope">
            <el-button size="small"
                       type="text"
                       :disabled="scope.row.status === 'USED'"
                       @click="handleDialogFormOpen(true,scope.row)">
              编辑
            </el-button>
            <el-button type="text"
                       class="danger"
                       size="small"
                       :disabled="scope.row.status === 'USED'"
                       @click="handleRemove(scope.row.id)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </base-list>
    <!-- 新增IC卡 -->
    <ic-card-add-form ref="icCardAddForm"
                      @load="loadData"></ic-card-add-form>
    <!-- IC卡领用 -->
    <ic-card-use-form ref="icCardUseForm"
                      @load="loadData"></ic-card-use-form>
    <div style="text-align:center">
      <el-button plain
                 type="info"
                 @click="handleRouterPush({path: '/Home/SystemBase',name: '基础管理工作台'})">返回</el-button>
    </div>
  </div>
</template>

<script>
import { deleteIcCard, getIcCardList,recoverIcCard } from '@/api/icCard/icCard'
import autoSearchDic from '@/components/autocomplete/autoSearchDic'
import autoSearchIcCard from '@/components/autocomplete/autoSearchIcCard'
import autoSearchCardNo from '@/components/autocomplete/autoSearchCardNo'
import icCardAddForm from './icCardAddForm'
import icCardUseForm from './icCardUseForm'

export default {
  name: 'icCard',
  components: {
    icCardAddForm,
    icCardUseForm,
    autoSearchIcCard,
    autoSearchCardNo,
    autoSearchDic
  },
  data() {
    return {
      condition: {}, // 查询条件
      icCard: [], // table数组
      pageSearch: getIcCardList, // 分页查询api接口
      id: '',
      cardTypeDesc: '',
      currentRow: null,
      disabled:false
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.loadData()
    })
  },
  methods: {
    loadData() {
      this.$refs.icCard.loadData()
    },
    handleDialogFormOpen(bool, item) {
      if (bool) {
        let form = JSON.parse(JSON.stringify(item))
        this.$refs.icCardAddForm.form = form
        this.$refs.icCardAddForm.isEdit = true
        this.$refs.icCardAddForm.dialogForm = true
      } else {
        this.$refs.icCardAddForm.dialogForm = true
      }
    },
    handleDialogUseForm(val) {
      if (val == null) {
        this.$message({
          message: '请选中一条数据',
          type: 'error'
        })
      } else if(val.status == 'USED'){
        this.$message({
          message: '此车已被领用，请重新选择',
          type: 'error'
        })
      }else{
        let form = JSON.parse(JSON.stringify(val))
        this.$refs.icCardUseForm.form = form
        this.$refs.icCardUseForm.dialogForm = true
      }
    },
    handleRemove(item) {
      this.$confirm(`是否删除该数据?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deleteIcCard(item.id).then(res => {
            this.$message({
              type: 'success',
              message: `删除成功!`
            })
            this.loadData()
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    handleCurrentChange(val) {
      this.currentRow = val
    },
    handleRouterPush(val) {
      this.$store.commit('ADD_CACHED_VIEWS', val)
      this.$router.push(val.path)
    },
//回收卡
    recover(val) {
      if (val == null) {
        this.$message({
          message: '请选中一条数据',
          type: 'error'
        })
      } else if(val.status == 'ENABLED'){
        this.$message({
          message: '此车可用，不用回收',
          type: 'error'
        })
      } else{
        this.$confirm(
          '确认回收被选择的IC卡吗？回收后被选择的IC卡不能被设备识别！',
          'IC卡',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        )
          .then(() => {
            recoverIcCard(val.id).then(res => {
              this.disabled = false
              this.$message({
                type: 'success',
                message: '回收成功!'
              })
              this.loadData()
            })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消回收'
            })
          })
      }
    }
  }
}
</script>

<style scoped>
</style>
